<template>
  <div>
    <el-tabs v-model="tabName" type="card">
      <el-tab-pane
        v-for="item in tabList"
        :key="item.id"
        :label="item.name"
        :name="item.id"
      ></el-tab-pane>
    </el-tabs>
    <div class="app-container">
      <!-- <el-row>
        <el-col :span="9">
          <el-input
            size="small"
            placeholder="订单号"
            v-model="searchStr"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col style="text-align:right;" :span="14">
          <el-date-picker
            style="width:150px;"
            size="small"
            v-model="timeStart"
            type="date"
            placeholder="开始日期"
          >
          </el-date-picker>
          —
          <el-date-picker
            style="width:150px;"
            size="small"
            v-model="timeEnd"
            type="date"
            placeholder="结束日期"
          >
          </el-date-picker>
          <el-button style="margin-left:5px;" size="small" type="primary"
            >导出订单</el-button
          >
        </el-col> -->
      </el-row>
      <div class="cus-table" :style="{ height: tableHeight + 'px' }">
        <div class="header">
          <el-row>
            <el-col :span="6">
              <div class="header-cell">商品信息</div>
            </el-col>
            <el-col :span="3">
              <div class="header-cell">用户</div>
            </el-col>
            <el-col :span="10">
              <div class="header-cell">申请理由</div>
            </el-col>
            <el-col :span="5">
              <div class="header-cell">操作</div>
            </el-col>
          </el-row>
        </div>
        <div v-if="getRole() === 'root'">
          <div
            style="border-bottom:1px solid #dfdfdf;"
            v-for="order in data"
            :key="order.id"
          >
            <div class="cell-top">
              <div>
                订单号：{{ order.order_no }} 下单时间：{{ order.created_at }}
              </div>
              <div style="text-align:right">
                <el-button
                  @click="
                    detailVisible = true;
                    currentOrder = {
                      order_no: order.order_no,
                      status: order.status
                    };
                  "
                  style="margin-right:5px;"
                  size="mini"
                  >订单详情</el-button
                >
              </div>
            </div>
            <div style="width:100%;overflow:hidden; ">
              <div
                style="display:flex; align-items:center;"
                v-for="item in order.commodity"
              >
                <div style="width:25%">
                  <div class="good-item">
                    <img
                      style="height:50px; width:50px !important;"
                      :src="item.img"
                      alt=""
                    />
                    <div style="width:calc(100% - 60px);">
                      <div style="">
                        {{ item.name }}
                      </div>
                      <div style="">单价：￥{{ item.price }}</div>
                    </div>
                    <div>×{{ item.number }}</div>
                  </div>
                </div>
                <div style="width:12.5%">
                  <div
                    style="text-align:center;"
                    class="small-cell"
                    v-if="order.user"
                  >
                    {{ order.user.nickname }}
                  </div>
                </div>
                <!-- <div style="width:12.5%">
                  <div style="text-align:center;" class="small-cell">
                    售后类型
                  </div>
                </div> -->

                <div v-if="item.after" class="after-sale" style="width:41.6%">
                  <div class="content">
                    {{ item.after.content }}
                  </div>
                  <div class="img">
                    <img
                      @click="imgPreview(img)"
                      v-for="(img, index) in item.after.image"
                      :key="index"
                      :src="img"
                      alt=""
                    />
                  </div>
                </div>
                <div style="width:20.8%">
                  <div
                    style="text-align:center;"
                    v-if="order.status == 5"
                    class="small-cell"
                  >
                    <el-button
                      @click="
                        currentOrder = item;
                        replyStatus = 1;
                        replyVisible = true;
                      "
                      size="small"
                      type="primary"
                      >接受</el-button
                    >
                    <el-button
                      @click="
                        currentOrder = item;
                        replyStatus = 0;
                        replyVisible = true;
                      "
                      size="small"
                      type="danger"
                      >拒绝</el-button
                    >
                  </div>
                  <div
                    style="text-align:center;"
                    v-if="order.status == -2"
                    class="small-cell"
                  >
                    <el-button
                      @click="currentOrder = item;
                      refundVisible = true"
                      size="small"
                      type="primary"
                      >退款</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <div
            style="border-bottom:1px solid #dfdfdf;"
            v-for="order in data"
            :key="order.id"
          >
            <div class="cell-top">
              <div>
                订单号：{{ order.order_no }} 下单时间：{{
                  order.created_at.date.split(".")[0]
                }}
              </div>
              <div style="text-align:right">
                <el-button
                  @click="
                    detailVisible = true;
                    currentOrder = {
                      order_no: order.order_no,
                      status: order.status
                    };
                  "
                  style="margin-right:5px;"
                  size="mini"
                  >订单详情</el-button
                >
              </div>
            </div>
            <div style="width:100%;overflow:hidden; ">
              <div style="display:flex; align-items:center;">
                <div style="width:25%">
                  <div class="good-item">
                    <img
                      style="height:50px; width:50px !important;"
                      :src="order.img"
                      alt=""
                    />
                    <div style="width:calc(100% - 60px);">
                      <div style="">
                        {{ order.name }}
                      </div>
                      <div style="">单价：￥{{ order.price }}</div>
                    </div>
                    <div>×{{ order.number }}</div>
                  </div>
                </div>
                <div style="width:12.5%">
                  <div
                    style="text-align:center;"
                    class="small-cell"
                    v-if="order.user"
                  >
                    {{ order.user.nickname }}
                  </div>
                </div>
                <!-- <div style="width:12.5%">
                  <div style="text-align:center;" class="small-cell">
                    售后类型
                  </div>
                </div> -->

                <div v-if="order.after" class="after-sale" style="width:41.6%">
                  <div class="content">
                    {{ order.after.content }}
                  </div>
                  <div class="img">
                    <img
                      @click="imgPreview(img)"
                      v-for="(img, index) in order.after.image"
                      :key="index"
                      :src="img"
                      alt=""
                    />
                  </div>
                </div>
                <div v-else class="after-sale" style="width:41.6%">
                   
                </div>
                <div style="width:20.8%">
                  <div
                    style="text-align:center;"
                    class="small-cell"
                  >
                    <!-- <el-button
                      @click="
                      "
                      size="small"
                      type="primary"
                      >打款</el-button
                    > -->
                    <!-- <el-button
                      @click="
                        currentOrder = order;
                        replyStatus = 0;
                        replyVisible = true;
                      "
                      size="small"
                      type="danger"
                      >拒绝</el-button
                    > -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="text-align:right;">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="size"
          layout="total, prev, pager, next"
          :total="total"
          :background="true"
        >
        </el-pagination>
      </div>
    </div>
    <order-detail
      :visible="detailVisible"
      :orderInfo="currentOrder"
      @close="detailVisible = false"
    ></order-detail>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <order-refund
      :visible="refundVisible"
      @close="
        refundVisible = false;
        getNormalOrderList(page, tabName);
      "
      :status="replyStatus"
      :order="currentOrder"
    ></order-refund>
    <after-sale-reply
      :visible="replyVisible"
      @close="
        replyVisible = false;
        getNormalOrderList(page, tabName);
      "
      :status="replyStatus"
      :order="currentOrder"
    ></after-sale-reply>
  </div>
</template>

<script>
import { getRole } from "@/utils/auth";
import { getAgentAfterSaleOrderList } from "@/api/agent-mng";
import { getNormalOrderList } from "@/api/order-mng";
import orderRefund from './component/order-refund'
import orderDetail from "./component/order-detail";
import afterSaleReply from "./component/accept-reply";
export default {
  name: "AfterSaleOrder",
  data() {
    return {
      getOrder:
        getRole() === "root" ? getNormalOrderList : getAgentAfterSaleOrderList,
      tabList: [
        {
          name: "退款中",
          id: "5"
        },
        {
          name: "已处理",
          id: "-2"
        },
        {
          name: "已退款",
          id: "-5"
        },
        {
          name: "已拒绝",
          id: "-4"
        }
      ],
      tabName: "5",
      searchStr: "",
      supplier: "",
      supplierList: [],
      timeStart: "",
      timeEnd: "",
      page: 1,
      data: [],
      detailVisible: false,
      operateVisible: false,
      currentOrder: {},
      tableHeight: 600,
      total: 0,
      size: 0,
      dialogVisible: false,
      dialogImageUrl: "",
      replyVisible: false,
      replyStatus: 1,
      refundVisible:false
    };
  },
  watch: {
    tabName: function(val) {
      this.getNormalOrderList(1, val);
    }
  },
  methods: {
    getRole() {
      return getRole();
    },
    imgPreview(img) {
      this.dialogImageUrl = img;
      this.dialogVisible = true;
    },
    getNormalOrderList(page, type) {
      this.getOrder({
        page,
        status: type,
        order_no: this.searchStr ? this.searchStr : null,
        vip: 0
      }).then(res => {
        if (res.code === 200) {
          this.data = res.data.data;
          this.total = res.data.total;
          this.page = res.data.current_page;
          this.size = res.data.per_page;
        }
      });
    },
    handleCurrentChange(page) {
      this.getNormalOrderList(page, this.tabName);
    },
    payType(type) {
      let text;
      switch (type) {
        case 1:
          text = "支付宝";
          break;
        case 2:
          text = "微信支付";
          break;
        case 3:
          text = "余额支付";
          break;
      }
      return text;
    },
    changeSize() {
      //若减少值存在则对宽高进行减少，否则为默认高宽值。
      this.tableHeight = document.body.clientHeight - 250;
      window.onresize = () => {
        this.changeSize();
      };
    }
  },
  components: {
    orderDetail,
    afterSaleReply,
    orderRefund
  },
  mounted() {
    this.changeSize();
  },
  created() {
    this.getNormalOrderList(1, this.tabList[0].id);
  }
};
</script>

<style lang="scss" scoped>
.cus-table {
  margin-top: 5px;
  border: 2px solid #dfdfdf;
  color: #444444;
  font-size: 14px;
  overflow: auto;
  .header {
    text-align: center;
    background: #efefef;
    height: 30px;
    line-height: 30px;
  }
  .cell-top {
    background-color: #dfdfdf;
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .small-cell {
    width: 100%;
    height: 100%;
    line-height: 80px;
  }
  .big-cell {
    height: auto;
    padding: 5px 0;
    display: inline-block;
    vertical-align: middle;
    word-break: break-all;
    width: 100%;
  }
  .good-item {
    display: flex;
    img {
      margin-right: 5px;
      vertical-align: middle;
      margin-left: 5px;
    }
  }
  .after-sale {
    img {
      width: 50px;
      height: 50px;
    }
  }
}
</style>
